<template>
    <div>
        <div style="margin: 0px 20px">
            <el-table :key="tableKey" v-loading="listLoading" :data="clerk_list" border fit highlight-current-row style="width: 100%">
                <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
                    <template slot-scope="{ row }">
                        <span>{{ row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center" width="150">
                    <template slot-scope="{ row }">
                        <span>{{ row.name ? row.name : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
                    <template slot-scope="{ row, $index }">
                        <el-button size="mini" type="primary" @click="handleUpdateClerk(row, $index)">
                            {{ $t("table.edit") }}
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                            {{ $t("table.delete") }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getClerk" />
        </div>

        <el-dialog title="编辑成员" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left: 50px">
                <el-form-item label="成员名字" prop="name" label-width="100px">
                    <el-input v-model="temp.name" type="text    " />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">
                    {{ $t("table.cancel") }}
                </el-button>
                <el-button type="primary" @click="updateData()">
                    {{ $t("table.confirm") }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { ofDepartment as clerkOfDepartment } from '@/scrm/api/clerk/clerk'
import { update } from '@/scrm/api/qiwei/clerk'
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

const defaultForm = {
    name: ''
}

export default {
    components: { Pagination },
    props: {
        departmentId: {
            type: Number,
            default: 0
        }
    },
    data() {
        const validateRequire = (rule, value, callback) => {
            if (value === '' || value === null || value === undefined) {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            clerk_list: [],
            total: 0,
            tableKey: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: "+id",
            },
            dialogFormVisible: false,
            temp: Object.assign({}, defaultForm),
            rules: {
                name: [{ validator: validateRequire, message: '名字为必填字段', trigger: 'blur' }]
            }
        }
    },
    watch: {
        departmentId(newV, oldV) {
            this.getClerk()
        }
    },
    methods: {
        getClerk() {
            this.listLoading = true
            clerkOfDepartment({
                id: this.departmentId
            }).then(res => {
                this.listLoading = false
                this.clerk_list = res.data.items
                this.total = res.data.total
            }).catch(e => {
                this.listLoading = false
            })
        },
        handleUpdateClerk(row, index) {
            this.dialogFormVisible = true
            this.temp = row
        },
        updateData() {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = this.temp
                    update(data).then(response => {
                        this.$notify({
                            title: '成功',
                            message: '修改成功',
                            type: 'success',
                            duration: 2000
                        })
                        // this.postForm.status = 'published'
                        this.loading = false
                        this.getClerk()
                        this.dialogFormVisible = false
                        // this.$router.push('/store/index')
                    }).catch(err => {
                        console.log(err)
                        this.loading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
</style>